import { doClickUsingGet } from '@/services/backend/bisheProjectController';
import { history } from '@umijs/max';
import { Card, List, Typography } from 'antd';
import { ListGridType } from 'antd/lib/list';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import useStyles from './style.style';

dayjs.extend(relativeTime);

const { Paragraph } = Typography;

interface Props {
  data: API.BisheProjectVO[];
  gutter?: ListGridType;
  loading: boolean;
}

const CardList: React.FC<Props> = (props) => {
  const {
    data,
    loading,
    gutter = {
      gutter: 16,
      xs: 1,
      sm: 2,
      md: 3,
      lg: 3,
      xl: 4,
      xxl: 4,
    },
  } = props;
  const { styles } = useStyles();

  const list = data || [];

  const cardList = list && (
    <List<API.BisheProjectVO>
      rowKey="id"
      loading={loading}
      grid={gutter}
      dataSource={list}
      renderItem={(item) => (
        <List.Item>
          <Card
            className={styles.card}
            hoverable
            cover={<img alt={item.title} src={item.cover} />}
            onClick={() => {
              //跳转
              history.push(`/bisheProject/detail/${item.id}`);
            }}
          >
            <Card.Meta
              title={<a>{item.title}</a>}
              description={
                <Paragraph
                  ellipsis={{
                    rows: 2,
                  }}
                >
                  {item.introduce}
                </Paragraph>
              }
            />
            <div className={styles.cardItemContent}>
              <span>{dayjs(item.updateTime).fromNow()}</span>
              <div className={styles.avatarList}>浏览人数: {item.clickNum}</div>
            </div>
          </Card>
        </List.Item>
      )}
    />
  );

  return <>{cardList}</>;
};

export default CardList;
